﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title>Angular Material - Starter App</title>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />

    <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Roboto:400,500,700,400italic'>
    <link rel="stylesheet" href="./components/angular-material/angular-material.min.css" />
    <link rel="stylesheet" href="./components/angular-loading-bar/build/loading-bar.min.css" />
    <link rel="stylesheet" href="./assets/styles/app.css" />
</head>

<body ng-app="starterApp" layout="column" ng-controller="UserController as ul">

    <md-toolbar layout="row" class="md-whiteframe-z2">
        <md-button class="menu" hide-gt-md ng-click="ul.toggleList()" aria-label="Show User List">
            <md-icon md-svg-icon="menu"></md-icon>
        </md-button>
        <h1>Angular Material - Starter App</h1>
    </md-toolbar>

    <div flex layout="row">

        <md-sidenav md-is-locked-open="$mdMedia('gt-md')" class="md-whiteframe-z2" md-component-id="left">
            <md-list>
                <md-item ng-repeat="it in ul.users">
                    <md-button ng-click="ul.selectUser(it)" ng-class="{'selected' : it === ul.selected }">
                        <md-icon md-svg-icon="{{it.avatar}}" class="avatar"></md-icon>
                        {{it.name}}
                    </md-button>
                </md-item>
            </md-list>
        </md-sidenav>

        <md-content flex id="content">
            <md-icon md-svg-icon="{{ul.selected.avatar}}" class="avatar"></md-icon>
            <h2>{{ul.selected.name}}</h2>
            <p>{{ul.selected.content}}</p>

            <md-button class="share" md-no-ink ng-click="ul.share($event)" aria-label="Share">
                <md-icon md-svg-icon="share">
                </md-icon>
            </md-button>
        </md-content>

    </div>

    <script type="text/javascript" src="./components/angular/angular.min.js"></script>
    <script type="text/javascript" src="./components/angular-animate/angular-animate.min.js"></script>
    <script type="text/javascript" src="./components/angular-loading-bar/build/loading-bar.min.js"></script>
    <script type="text/javascript" src="./components/angular-aria/angular-aria.min.js"></script>
    <script type="text/javascript" src="./components/angular-material/angular-material.min.js"></script>

    <script type="text/javascript" src="./app/modules/Users.js"></script>
    <script type="text/javascript" src="./app/controllers/UserController.js"></script>
    <script type="text/javascript" src="./app/services/UserService.js"></script>

    <script type="text/javascript" src="./app.js"></script>


</body>
</html>
